<template>
  <div class="wrapper">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="运单号:" prop="waybill_ids" style="width:300px">
        <el-select v-model="ruleForm.waybill_ids" placeholder="请选择">
          <el-option v-for="item in waybill_no_list" :key="item.waybill_id" :label="item.waybill_no" :value="item.waybill_id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输环节:" prop="number" style="width:200px">
        <span>{{ step | afterTime  }}</span>
      </el-form-item>
      <el-form-item label="异常原因" prop="reason">
        <el-select v-model="ruleForm.reason">
          <el-option v-for="(item, index) in causeData" :key="index" :value="item.item_code" :label="item.item_name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="异常数量" prop="number">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="number" label="件数">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="重量(kg)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.weight"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="体积(m³)">
            <template slot-scope="scope">
              <el-input v-model="scope.row.volume"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="package_quantity" label="包装数量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.package_quantity"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="流转到下一环节:" prop="is_transfer_next_step" style="width:300px">
        <el-radio v-model="ruleForm.is_transfer_next_step" label="1">是</el-radio>
        <el-radio v-model="ruleForm.is_transfer_next_step" label="0">否</el-radio>
   
      </el-form-item>
      <el-form-item label="异常依据" prop="images">
        <el-upload action :auto-upload="false" list-type="picture-card" :before-remove="beforeRemove" :on-preview="handlePreview" :on-remove="handleRemove" :on-change="handleChange" :file-list="fileList">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :append-to-body="true" :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

    </el-form>
    <div style="margin-top: 20px; text-align: right">
      <el-button @click="handleClickClose">取消</el-button>
      <el-button type="primary" @click="handleClickOk">确定</el-button>
    </div>
  </div>
</template>

<script>
import { reqDictionaryOptions } from "@/api/earlywarning";
import { uploading } from "../../material/common/common";

import {
  MessageBox
} from 'element-ui';
import {
  AbnormalRecordCreate,
  waybillAmountListFn
} from "@/api/waybill";

export default {
  name: 'abnormalModal',
  components: {},
  props: ['waybillIds', 'nodeId', 'step'],
  data() {
    return {
      causeData: [],
      fileList: [],
      ruleForm: {
        images: [],
        reason:"",
        waybill_ids: [],
        is_transfer_next_step: '1',// 是否下一环节
      },
     
      rules: {
        waybill_ids: [
          { required: true, message: "请填写运单号", trigger: "blur" },
        ],
        images: [
          { required: true, message: "请上传揽收异常依据", trigger: "blur" },
        ],
        reason: [
          { required: true, message: "请选择异常原因", trigger: "change" },
        ],
        is_transfer_next_step:[
        { required: true, message: "请选择流装下一环节", trigger: "change" },
        ]
      },
      dialogVisible: false,
      dialogImageUrl: "",
     
      waybill_no_list: [],//运单列表
      tableData: [{
        number: '0', //件数
        weight: '0', //重量
        volume: '0', //体积
        package_quantity: "0" //包装数量
      }]
    };
  },

  filters: {
    afterTime(value) {

      switch (value) {
        case 1:
          return "揽收"
        case 2:
          return "干线"
        case 3:
          return "配送"
        case 4:
          return "签收"
        case 5:
          return "回单"
        case 6:
          return "回箱"
      }
    },
  },

  mounted() {
    this.nodenameDataFn();
    this.PagewaybillAmountListFn()
  },
  methods: {
    nodenameDataFn() {
      const data = {
        dictionary_code: "abnormal_cause",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.causeData = res.data.list;
        }
      });
    },
    // 图片上传功能
    handleChange(file, fileList, type) {
      this.fileList = fileList;
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((res) => {
        this.ruleForm.images.push({
          uid: file.uid,
          url: res.res.requestUrls[0],
        });
      });
    },
    handleRemove(file, fileList) {
      const index = this.ruleForm.images.findIndex(
        (item) => item.uid === file.uid
      );
      index > -1 && this.ruleForm.images.splice(index, 1);
    },
    removeChange(file, fileList, type) { },
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeRemove(file, fileList) {
      return true;
    },
    handleClickOk() {
      this.$refs["ruleForm"].validate((valid) => {
        if (!valid) return;
        this.ruleForm.images = this.ruleForm.images.map((item) => item.url);
        const stepToType = [, '1', '3', '4', '5', '6', '7'];
        const data = {
          ...this.ruleForm,
          waybill_ids: [this.ruleForm.waybill_ids],
          node_id: this.nodeId,
          node: stepToType[this.step],
          number: this.tableData[0].number,
          weight: this.tableData[0].weight,
          volume: this.tableData[0].volume,
          package_quantity:this.tableData[0].package_quantity,
          reason:this.ruleForm.reason,
        };
        AbnormalRecordCreate(data).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "提交异常成功!",
            });
            MessageBox.close();
          }
        });
      });
    },
    handleClickClose() {
      MessageBox.close();
    },
    PagewaybillAmountListFn() {
      var params = {
        waybill_id_list: this.waybillIds.map(Number)
      }
      waybillAmountListFn(params).then((res) => {
        this.waybill_no_list = res.data
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .demo-ruleForm {
    width: 500px;
  }
}
</style>